<template>
  <div class="Login">
    <div class="Login_box">
      <div class="Login_headImg">
        <img src="~static/images/login/bg_image_material_two.png" alt="">
      </div>
      <div class="Login_form">
        <div class="Login_form_group">
          <input placeholder="请输入手机号" class="Login_form_input" v-model="mobile" name="mobile" maxlength="11" type="tel" :class="{'Login_form_input_danger':errors.has('mobile')}" v-validate="{required:true,max:11,min:11,regex:isMobile}" />
          <p class="Login_form_tip">
            <span v-show="errors.has('mobile')">{{errors.first('mobile')}}</span>
          </p>
        </div>
        <div class="Login_form_group">
          <input placeholder="请输入密码" class="Login_form_input" v-model="pwd" name="pwd" maxlength="16" type="password" :class="{'Login_form_input_danger':errors.has('pwd')}" v-validate="'required|max:16|min:6'" />
          <p class="Login_form_tip">
            <span v-show="errors.has('pwd')">{{ errors.first('pwd') }}</span>
          </p>
        </div>
        <nuxt-link to="/login/code" class="Login_form_codeLogin fr">验证码登录</nuxt-link>
        <div class="Login_form_footer">
          <img src="~/static/images/login/button_normal.png" alt="" class="Login_form_submit" @click="doSubmit">
          <nuxt-link to="/resetPassword" class="Login_form_forgetPwd">忘记密码</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isMobile } from '~/utils/regx'//正则表达式检查是否为手机格式
import { login } from '~/api/'
import { haslogin } from "~/middleware/logincheck"//中间件检测是否登录
export default {
  middleware: haslogin,
  data() {
    return {
      isMobile,
      mobile: "15658163225",
      pwd: "webadmin"
    }
  },
  /*methods: {
    doSubmit() {
      this.$validator.validateAll().then(async (result) => {
        if (!result) return
        const res = await login(this, this.mobile, this.pwd)
        if (res.code === '0') {
          this.$store.dispatch('setLoginStatus', this.mobile)
          this.$message.success('登录成功')
          this.$router.replace('/')
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }*/
  methods:{
      doSubmit(){
         this.$validator.validateAll().then(async (result) => {
            if(!result) return
            const res =await  login (this, this.mobile, this.pwd)
            if(res.code==='0'){
               this.$store.dispatch('setLoginStatus', this.mobile)
               this.$message.success('登录成功');
               //this.$router.replace('/');
               this.$router.push('/')
            }else{
              this.$message.error(res.message)
            }
          })
  }
 }
}
</script>
